<template>
  <div>
    <field-edit ref="edit" :buildingId='buildingId' @edit='onEditItem' @add='onAddItem'>
    </field-edit>

    <Modal v-model="model" width="1200" :closable="false" :mask-closable="false">
      <template v-slot:header>
        <div class="header flex">
          <div class='title'>编辑本案台账字段</div>
          <Button :loading='loading' type="primary" @click='onAdd'>新增台账字段</Button>
        </div>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <div style="flex: 1;" />
          <Button type="text" @click='onCancel'>取消</Button>
          <Button type="primary" @click='onOK'>确定</Button>
        </div>
      </template>
      <div class="content flex">
        <div class="tab">
          <div class="item" v-for="(item, index) in tabList" :key='index'
            :style="{color: index == tabIndex ? '#2d8cf0' : '' }" @click="onTab(index)">
            {{item.title}}
          </div>
        </div>
        <dt-select ref="select" :leftInfo='leftInfo' :rightInfo='rightInfo' @move='onMove'>
          <template v-slot:left-title>
            <div class='title'>已添加字段({{leftInfo.list.length}})</div>
          </template>
          <template v-slot:right-title>
            <div class='title'>未添加字段({{rightInfo.list.length}})</div>
          </template>
        </dt-select>
      </div>
    </Modal>
  </div>
</template>

<script>
  import fieldEdit from './fieldEdit.vue'
  import fieldMgr from './field.js'

  export default {
    components: {
      fieldEdit
    },
    // props: {
    //   buildingId: Number,
    // },
    data() {
      return {
        buildingId: this.$dt.buildInfo().housesId,
        loading: false,
        model: false,

        field: null,

        tabList: [],
        tabIndex: 0,

        leftInfo: {
          width: '524px',
          list: [],
          columns: []
        },
        rightInfo: {
          width: '403px',
          list: [],
          columns: [{
            type: 'selection',
            width: 60,
            align: 'center'
          }, {
            key: 'fieldValue',
            title: '字段名称',
            width: 180,
            align: 'center'
          }, {
            title: '操作',
            width: 150,
            align: 'center',
            render: (h, params) => {
              let data = params.row
              let dbkeys = ['intention_region', 'intention_subway', 'living_area',
                'working_area'
              ]
              let canEdit = data.fieldType == 3 && dbkeys.indexOf(data.dbKey) < 0
              // 回滚
              // canEdit = data.fieldKey.indexOf('XZL') == 0
              return h('div', [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '是否确认删除此字段？',
                        onOk: () => {
                          this.field.deleteItem(data).then(res => {
                            this.update()
                          })
                        }
                      });
                    }
                  }
                }, '删除'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                    disabled: !canEdit,
                  },
                  style: {
                    marginRight: '5px',
                    visibility: canEdit ? '' : 'hidden'
                  },
                  on: {
                    click: () => {
                      this.$refs.edit.showEdit(this.field, data)
                    }
                  }
                }, '编辑')
              ])
            }
          }]
        }
      }
    },
    methods: {
      leftColumn() {
        let arr = [{
          type: 'selection',
          width: 60,
          align: 'center'
        }, {
          type: 'index',
          // key: 'serialNo',
          title: '序号',
          width: 70,
          align: 'center'
        }, {
          key: 'fieldValue',
          title: '字段名称',
          width: 180,
          align: 'center'
        }, {
          key: 'ifRequired',
          title: '是否必填',
          width: 100,
          align: 'center',
          render: (h, params) => {
            if (params.row.fieldType == 1 || params.row.fieldType == 2) {
              return h('div', params.row.ifRequired == 1 ? '必填' : '选填')
            }
            return h('i-switch', {
              props: {
                size: 'large',
                value: params.row.ifRequired == 1,
              },
              on: {
                'on-change': (res) => {
                  params.row.ifRequired = res ? 1 : 2
                  this.field.editItem(params.row)
                  this.update()
                }
              }
            }, [
              h('span', {
                slot: 'open'
              }, '必填'),
              h('span', {
                slot: 'close'
              }, '选填')
            ])
          }
        }]
        if (this.tabIndex == 0) {
          arr.push({
            title: '  ',
            width: 100,
          })
        } else {
          arr.push({
            title: '上移/下移',
            width: 100,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'md-arrow-round-up',
                    color: params.row._canUp ? '#2d8cf0' : '#c5c8ce',
                    size: '20'
                  },
                  on: {
                    click: () => {
                      if (params.row._canUp) {
                        this.field.up(params.row)
                        this.update()
                      }
                    }
                  }
                }),
                h('Icon', {
                  props: {
                    type: 'md-arrow-round-down',
                    color: params.row._canDown ? 'red' : '#c5c8ce',
                    size: '20'
                  },
                  on: {
                    click: () => {
                      if (params.row._canDown) {
                        this.field.down(params.row)
                        this.update()
                      }
                    }
                  }
                })
              ])
            }
          })
        }
        return arr
      },
      update() {
        this.tabList = this.field.keys
        let key = this.tabList[this.tabIndex].key
        this.rightInfo.list = this.field.unAdded[key] || []
        this.leftInfo.list = this.field.added[key] || []
        this.leftInfo.columns = this.leftColumn()
      },
      onMove(res) {
        if (res.isLeft) {
          this.field.remove(res.list)
        } else {
          this.field.add(res.list)
        }
        this.update()
      },
      showSelect() {
        this.loading = true
        this.tabIndex = 0
        this.model = true
        fieldMgr.infos(this.buildingId).then(res => {
          this.field = res
          this.loading = false
          this.update()
        })
      },
      onAdd() {
        if (this.field) {
          this.$refs.edit.showEdit(this.field)
        } else {
          this.$Message.warning('数据暂未加载完成')
        }
      },
      onTab(index) {
        this.tabIndex = index
        this.update()
      },
      onOK() {
        if (this.field) {
          this.field.save().then(res => {
            this.model = false
            this.$emit('save')
          }).catch(err => {
            this.$Message.error(err)
          })
        } else {
          this.model = false
        }
      },
      onCancel() {
        if (this.field && this.field.isEdit()) {
          this.$Modal.confirm({
            title: '是否确认取消编辑本案台账？',
            onOk: () => {
              this.model = false
            }
          });
        } else {
          this.model = false
        }
      },
      onEditItem(item) {
        this.field.editItem(item)
        this.update()
      },
      onAddItem(item) {
        item._highlight = true
        this.tabIndex = item.infoType
        this.update()
        this.$refs.select.scrollToHighlight().then(() => {
          setTimeout(() => {
            item._highlight = false
          }, 1000)
        })
      }
    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .header {
    .title {
      font-size: 20px;
      font-weight: 600;
    }
  }

  .content {
    .tab {
      .item {
        font-size: 20px;
        font-weight: 600;
        margin: 10px;
      }
    }

    .title {
      text-align: center;
      background-color: #e8eaec;
      height: 45px;
      line-height: 45px;
    }

    .column {
      width: 90px;
      text-align: center;
    }
  }
</style>